<%@page import="servlet.ApptFilterDropdown"%>
<%@page import="servlet.ApprovalTable2"%>
<%@page import="servlet.ApprovalTable1"%>
<%@page import="servlet.ApprovedTable"%>
<%@page import="servlet.AppttypeTable"%>
<%@page import="Logic.Authorizer"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<!-- Declare the first header -->
<jsp:include page="t_header.jsp" />

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<script type="text/javascript" src="js/jquery.simplemodal.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<style type="text/css" >
.tdmar1 {
text-align:center;
vertical-align: middle;


margin-bottom:35px;

font-size: 18pt;

display: block;



margin-start: 0;
margin-end: 0;
font-weight: bold;

	color: #1F1F20;
	text-transform: uppercase;
	text-shadow: 0 1px 0 #fff;
	font-size: 13px;
	
	display: block;
	width: 90%;
	float: left;
margin-top:-10px;
}
.tdmar2 {

margin-bottom:35px;
}
.tdmar3 {

margin-bottom:35px;
}

#headingLabel {
	color: #1F1F20;
	text-transform: uppercase;
	text-shadow: 0 1px 0 #fff;
	font-size: 13px;
	position:relative;
	top:-40px;
	margin:0px 0px 0px 10px;
	font-weight:bold;
}
</style>

<script type="text/javascript">

function getResponsiblity(){
	var value = document.getElementById("getResponsiblity");
	alert(value.value);
}

function setPopup(appointmentID, event){
	
	//MyWindow=window.open('appttype_responsibilities.jsp?id='+ appointmentID,'MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=400,height=250');
	$(apptDescriptionPanel).load('appttype_responsibilities.jsp?id='+ appointmentID);
	$(apptDescriptionPanel).show();
	//var posy = event.clientY + 5;
	//var posx = event.clientX + 20;
	
	//MyWindow.moveTo(posx,posy);
}

/*$(document).ready(function() 
		{	
			$("#vpb_pop_up_background").click(function()
			{
				$("#vpb_signup_pop_up_box").hide(); */

$(document).ready(function(){
	$(".appointmentapprovedlist").change(function(){
		
		var value = this.value;
		
		if (value == "all"){
			$(".approvedbody tr").show();
		}
		
		else{
		$(".approvedbody tr").show();
		$(".approvedbody tr").not("." +value).hide();
		}
	});
	$(apptDescriptionPanel).click(function()
	{
		$(apptDescriptionPanel).hide();
	});
});
</script>

<!-- Declare Breadcrumbs options -->
<!--  <div class="breadcrumbs_container">
	<article class="breadcrumbs">
		<a href="staffapp_approved.jsp">Manage Staff Appointments</a> 
		<div class="breadcrumb_divider"></div>
		<a class="current">View Appointment</a>
	</article>
</div> -->
<jsp:include page="header.html" />


<!-- Declare sidebar -->
<jsp:include page="t_sidebarappointment.jsp" />

<!-- Main Content -->
<section id="main" class="column">

	<article class="module width_full">
		
		
		<header>

		

		<table style="height:10px">
		<tr  style="height:10px;valign:top;">
		<td style="width:40%;valign:top;">		<p  id="headingLabel">View Appointment</p></td>
		<td style="width:20%; text-align:left;  "><p class="tdmar2" >View by appointment:</p></td>
		
		<td style="width:40%; "><select id="appointmentapprovedlist" class="appointmentapprovedlist tdmar3" style="width:100%; float: left;">
						<%
								ApptFilterDropdown atd = new ApptFilterDropdown(out);
								atd.doGet(request, response);
						%>
		</select></td>
		</tr>
		</table></header>
		

		<div id="apptDescriptionPanel" style="position:absolute;top:100px;left:100px;"></div>
		<table class="tablesorter" cellspacing="0">
			<thead>
				<tr>
					<th style="width:15%">Name</th>
					<th style="width:25%">Appointment</th>
					<th style="width:10%">Diploma</th>
					<th style="width:10%">Year</th>
					<th style="width:10%">Description</th>
					<th style="width:15%">Effective Date</th>
					<th style="width:15%">Approved By</th>
					<th style="width:15%"></th>
				</tr>
			</thead>
			<tbody class="approvedbody">
				<%
						ApprovedTable rt = new ApprovedTable(out);
						rt.doGet(request, response);
				%>
			</tbody>
		</table>
		

	</article><!-- end of content manager article -->
		<div class="spacer">
		</div>
	</section>
	
	

<!-- Declare closing tags -->
<jsp:include page="t_footer.jsp"/>